<template>
<transition name="dialog-fade">
  <div class="el-dialog__wrapper n-dialog" v-show="visible" @click.self="handleWrapperClick" @mouseup="handleMouseUp" @mousemove="handleMouseMove">
    <div class="el-dialog" :class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]" ref="dialog" :style="style">
      <div class="el-dialog__header" :style="{cursor: draggable  ? 'move' : ''}" @mousedown="handleMouseDown">
        <slot name="title">
          <span class="el-dialog__title">{{ title }}</span>
        </slot>
        <button type="button" class="el-dialog__headerbtn" aria-label="Close" v-if="showClose" @click="handleClose">
            <i class="el-dialog__close el-icon el-icon-close"></i>
          </button>
      </div>
      <div class="el-dialog__body" v-if="rendered">
        <slot></slot>
      </div>
      <div class="el-dialog__footer" v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
import Popup from 'element-ui/src/utils/popup';
import Migrating from 'element-ui/src/mixins/migrating';
import emitter from 'element-ui/src/mixins/emitter';

export default {
  name: 'zDialog',
  mixins: [Popup, emitter, Migrating],
  props: {
    draggable: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },

    modal: {
      type: Boolean,
      default: true
    },

    modalAppendToBody: {
      type: Boolean,
      default: true
    },

    appendToBody: {
      type: Boolean,
      default: false
    },

    lockScroll: {
      type: Boolean,
      default: true
    },

    closeOnClickModal: {
      type: Boolean,
      default: true
    },

    closeOnPressEscape: {
      type: Boolean,
      default: true
    },

    showClose: {
      type: Boolean,
      default: true
    },

    width: String,

    fullscreen: Boolean,

    customClass: {
      type: String,
      default: ''
    },

    top: {
      type: String,
      default: '15vh'
    },
    beforeClose: Function,
    center: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      drag: false,
      startX: 0,
      startY: 0,
      offsetTop: 0,
      offsetLeft: 0,
      closed: false
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.offsetLeft = 0;
        this.offsetTop = 0;
        this.closed = false;
        this.$emit('open');
        this.$el.addEventListener('scroll', this.updatePopper);
        this.$nextTick(() => {
          this.$refs.dialog.scrollTop = 0;
        });
        if (this.appendToBody) {
          document.body.appendChild(this.$el);
        }
      } else {
        this.$el.removeEventListener('scroll', this.updatePopper);
        if (!this.closed) this.$emit('close');
      }
    }
  },

  computed: {
    style() {
      const style = {};
      if (this.width) {
        style.width = this.width;
      }
      if (!this.fullscreen) {
        style.marginTop = this.top;
      }
      if (this.draggable) {
        style.left = this.offsetLeft;
        style.top = this.offsetTop;
      }
      return style;
    }
  },

  methods: {
    handleMouseDown(e) {
      if (!this.draggable) {
        return;
      }
      this.drag = true; // 开始拖拽
      this.startX = e.clientX; // 鼠标起点x
      this.startY = e.clientY; // 鼠标起点y
      if (e && e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
      } else {
        e.cancelBubble = true;
        e.returnValue = false;
      }
    },
    handleMouseMove(e) {
      if (!this.draggable) {
        return;
      }
      if (!this.drag) {
        return;
      }
      const dx = e.clientX - this.startX;
      const dy = e.clientY - this.startY;
      this.offsetTop = parseInt(this.$refs.dialog.style.top) + dy + 'px';
      this.offsetLeft = parseInt(this.$refs.dialog.style.left) + dx + 'px';
      this.startX = e.clientX;
      this.startY = e.clientY;
      if (e && e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
      } else {
        e.cancelBubble = true;
        e.returnValue = false;
      }
    },
    handleMouseUp() {
      if (!this.draggable) {
        return;
      }
      if (this.drag) {
        this.drag = false;
      }
    },
    getMigratingConfig() {
      return {
        props: {
          'size': 'size is removed.'
        }
      };
    },
    handleWrapperClick() {
      if (!this.closeOnClickModal) return;
      this.handleClose();
    },
    handleClose() {
      if (typeof this.beforeClose === 'function') {
        this.beforeClose(this.hide);
      } else {
        this.hide();
      }
    },
    hide(cancel) {
      if (cancel !== false) {
        this.$emit('update:visible', false);
        this.$emit('close');
        this.closed = true;
      }
    },
    updatePopper() {
      this.broadcast('ElSelectDropdown', 'updatePopper');
      this.broadcast('ElDropdownMenu', 'updatePopper');
    }
  },

  mounted() {
    if (this.visible) {
      this.rendered = true;
      this.open();
      if (this.appendToBody) {
        document.body.appendChild(this.$el);
      }
    }
  },

  destroyed() {
    // if appendToBody is true, remove DOM node after destroy
    if (this.appendToBody && this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  }
};
</script>
<style lang="scss">
.el-dialog__header{
  height: 15px !important;
  padding: 10px;
  line-height: 15px;
  .el-dialog__headerbtn{
    top: 10px;
  }
  .el-dialog__title {
    line-height: inherit;
    font-size: 14px;
  }
}
</style>
